<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8" errorPage="/error.jsp" isELIgnored="false" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.opensymphony.com/oscache" prefix="cache" %>
<%@ taglib uri="http://atleap.blandware.com/taglib" prefix="atleap" %>
<html:xhtml />

<script language="javascript">
    var allRoles = new Array();
    <atleap:iterator items="${requestScope.allRoles}" var="role">
        allRoles["${role.title}"] = '<c:out value="${role.description}" escapeXml="true" />';
    </atleap:iterator>

    var allGroups = new Array();
    <atleap:iterator items="${requestScope.allGroups}" var="group">
        allGroups["${group.title}"] = '<c:out value="${group.description}" escapeXml="true" />';
    </atleap:iterator>
</script>
<atleap:content identifier="information" ignore="true" />
<atleap:messages property="updateFailed" />
<atleap:form action="core/user/assignRolesAndGroups" method="POST" onsubmit="selectAllOptions(document.getElementById('availableRoles')); selectAllOptions(document.getElementById('userRoles')); selectAllOptions(document.getElementById('availableGroups')); selectAllOptions(document.getElementById('userGroups'));" validateOnSubmit="false">
    <html:hidden property="version" />
    <h3><atleap:message key="core.user.form.freeRoles" /></h3>
    <table cellpadding="0" cellspacing="0" border="0" class="selectbox">
        <tr>
            <td align="center">
                <div class="title"><atleap:message key="core.commons.forms.selectFreeRoles.availableRoles" /></div>
            </td>
            <td></td>
            <td align="center">
                <div class="title"><atleap:message key="core.commons.forms.selectFreeRoles.assignedRoles" /></div>
            </td>
        </tr>
        <tr>
            <td rowspan="4" align="left">
                <html:select property="availableRoles" multiple="true" size="5" styleId="availableRoles" ondblclick="moveSelectedOptions(document.getElementById('availableRoles'), document.getElementById('userRoles'), true);" onchange="renewAuxInfo('availableRoles', 'roleAuxiliaryInfo', allRoles);">
                    <html:optionsCollection property="availableRolesList" label="title" value="name" />
                </html:select>
                <script language="javascript">
                    sortSelect(document.getElementById('availableRoles'));
                </script>
            </td>
            <td height="25">
                <a href="javascript:void(0);" onclick="moveSelectedOptions(document.getElementById('availableRoles'), document.getElementById('userRoles'), true);" title="<atleap:message key="core.commons.buttons.moveRight" />">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveRight.gif" alt="<atleap:message key="core.commons.buttons.moveRight" />" title="<atleap:message key="core.commons.buttons.moveRight" />" border="0" />
                </a>
            </td>
            <td rowspan="4" align="right">
                <html:select property="selectedRoles" multiple="true" size="5" styleId="userRoles" ondblclick="moveSelectedOptions(document.getElementById('userRoles'), document.getElementById('availableRoles'), true);" onchange="renewAuxInfo('userRoles', 'roleAuxiliaryInfo', allRoles);">
                    <html:optionsCollection property="selectedRolesList" label="title" value="name" />
                </html:select>
                <script language="javascript">
                    sortSelect(document.getElementById('userRoles'));
                </script>
            </td>
        </tr>
        <tr>
            <td height="25">
                <a href="javascript:void(0);"  onclick="moveAllOptions(document.getElementById('availableRoles'), document.getElementById('userRoles'), true);" title="<atleap:message key="core.commons.buttons.moveAllRight" />">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveAllRight.gif" title="<atleap:message key="core.commons.buttons.moveAllRight" />" alt="<atleap:message key="core.commons.buttons.moveAllRight" />" border="0" />
                </a>
            </td>
        </tr>
        <tr>
            <td height="25">
                <a href="javascript:void(0);" onclick="moveAllOptions(document.getElementById('userRoles'), document.getElementById('availableRoles'), true);" title="<atleap:message key="core.commons.buttons.moveAllLeft" />">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveAllLeft.gif" alt="<atleap:message key="core.commons.buttons.moveAllLeft" />" title="<atleap:message key="core.commons.buttons.moveAllLeft" />" border="0" />
                </a>
            </td>
        </tr>
        <tr>
            <td height="25">
                <a href="javascript:void(0);" title="<atleap:message key="core.commons.buttons.moveLeft" />" onclick="moveSelectedOptions(document.getElementById('userRoles'), document.getElementById('availableRoles'), true);">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveLeft.gif" alt="<atleap:message key="core.commons.buttons.moveLeft" />" title="<atleap:message key="core.commons.buttons.moveLeft" />" border="0" />
                </a>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="roleAuxiliaryInfo" class="auxiliaryInfo">&nbsp;</div>
            </td>
        </tr>
    </table>
    <h3><atleap:message key="core.user.form.groups" /></h3>
    <table cellpadding="0" cellspacing="0" border="0" class="selectbox">
        <tr>
            <td align="center">
                <div class="title"><atleap:message key="core.commons.forms.selectGroups.availableGroups" /></div>
            </td>
            <td></td>
            <td align="center">
                <div class="title"><atleap:message key="core.commons.forms.selectGroups.assignedGroups" /></div>
            </td>
        </tr>
        <tr>
            <td rowspan="4" align="left">
                <html:select property="availableGroups" multiple="true" size="5" styleId="availableGroups" ondblclick="moveSelectedOptions(document.getElementById('availableGroups'), document.getElementById('userGroups'), true);" onchange="renewAuxInfo('availableGroups', 'groupAuxiliaryInfo', allGroups);">
                    <html:optionsCollection property="availableGroupsList" label="title" value="name" />
                </html:select>
                <script language="javascript">
                    sortSelect(document.getElementById('availableGroups'));
                </script>
            </td>
            <td height="25">
                <a href="javascript:void(0);" onclick="moveSelectedOptions(document.getElementById('availableGroups'), document.getElementById('userGroups'), true);" title="<atleap:message key="core.commons.buttons.moveRight" />">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveRight.gif" alt="<atleap:message key="core.commons.buttons.moveRight" />" title="<atleap:message key="core.commons.buttons.moveRight" />" border="0" />
                </a>
            </td>
            <td rowspan="4" align="right">
                <html:select property="selectedGroups" multiple="true" size="5" styleId="userGroups" ondblclick="moveSelectedOptions(document.getElementById('userGroups'), document.getElementById('availableGroups'), true);" onchange="renewAuxInfo('userGroups', 'groupAuxiliaryInfo', allGroups);">
                    <html:optionsCollection property="selectedGroupsList" label="title" value="name" />
                </html:select>
                <script language="javascript">
                    sortSelect(document.getElementById('userGroups'));
                </script>
            </td>
        </tr>
        <tr>
            <td height="25">
                <a href="javascript:void(0);"  onclick="moveAllOptions(document.getElementById('availableGroups'), document.getElementById('userGroups'), true);" title="<atleap:message key="core.commons.buttons.moveAllRight" />">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveAllRight.gif" title="<atleap:message key="core.commons.buttons.moveAllRight" />" alt="<atleap:message key="core.commons.buttons.moveAllRight" />" border="0" />
                </a>
            </td>
        </tr>
        <tr>
            <td height="25">
                <a href="javascript:void(0);" onclick="moveAllOptions(document.getElementById('userGroups'), document.getElementById('availableGroups'), true);" title="<atleap:message key="core.commons.buttons.moveAllLeft" />">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveAllLeft.gif" alt="<atleap:message key="core.commons.buttons.moveAllLeft" />" title="<atleap:message key="core.commons.buttons.moveAllLeft" />" border="0" />
                </a>
            </td>
        </tr>
        <tr>
            <td height="25">
                <a href="javascript:void(0);" title="<atleap:message key="core.commons.buttons.moveLeft" />" onclick="moveSelectedOptions(document.getElementById('userGroups'), document.getElementById('availableGroups'), true);">
                    <img src="${ctxPath}/images/theme/${appConfig['adminCssTheme']}/moveLeft.gif" alt="<atleap:message key="core.commons.buttons.moveLeft" />" title="<atleap:message key="core.commons.buttons.moveLeft" />" border="0" />
                </a>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="groupAuxiliaryInfo" class="auxiliaryInfo">&nbsp;</div>
            </td>
        </tr>
        <tr>
            <td align="left">
                <atleap:submit styleClass="button">
                    <atleap:message key="core.commons.buttons.assign" />
                </atleap:submit>
            </td>
            <td></td>
            <td align="right">
                <atleap:cancel styleClass="button">
                    <atleap:message key="core.commons.buttons.cancel" />
                </atleap:cancel>
            </td>
        </tr>
    </table>
</atleap:form>
